<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>左侧菜单点击展开其他隐藏例子</title>
    <script src="../js/jquery-2.1.1.min.js"></script>
    <style>
        .header{
            background-color:black;
            color:white;
        }
        .content{
           height: 50px;
        }
        .hide{
            display:none;
        }
    </style>
</head>
<body>
    <div style="height:600px;width:200px;border:1px solid #dddddd;">
        <div class="item">
            <div class="header">标题一</div>
            <div class="concent hide">内容一</div>
        </div>
        <div class="item">
            <div class="header">标题二</div>
            <div class="concent hide">内容二</div>
        </div>
    </div>
    <script>
        $(".header").click(function(){
            console.log(1);
            $(this).next().removeClass('hide')
            $(this).parent().siblings().find('.concent').addClass('hide')
        })
    </script>
</body>
</html>